<template>
  <div class="router-planning-list">
    <div class="router-list" :style="[routerListStyle]">
      <el-tree
        :data="routelist"
        :props="defaultProps"
        :default-checked-keys="defaultKey"
        show-checkbox
        node-key="id"
        ref="routetree"
        :render-after-expand="false"
        @check-change="checkChangeClick"
      >
        <div slot-scope="{ node, data }" class="tree-column">
          <div class="tree-column-name">
            <i class="el-icon-cloudy" style="margin-right: 5px"></i>
            <span>{{ data.name }}</span>
          </div>
          <div class="tree-column-icon">
            <i
              v-if="node.checked"
              class="el-icon-location-outline"
              @click="location(node)"
            ></i>

            <i class="el-icon-delete" @click="deletePath(node.data.id)"></i>
            <i
              v-if="node.checked"
              class="el-icon-position"
              @click="fly(node)"
            ></i>
          </div>
        </div>
      </el-tree>
    </div>

    <div class="roam-adjust" v-if="judstModel" :style="[detailsPanelStyle]">
      <div class="roam-flex">
        <div class="roam-item-label">视角模式</div>
        <el-select size="mini" v-model="form.sjms" @change="sjmsChange">
          <el-option label="跟随模型" value="0">跟随模型</el-option>
          <el-option label="第一人称视角" value="1">第一人称视角</el-option>
          <el-option label="上帝视角" value="2">上帝视角</el-option>
          <el-option label="无人机视角" value="3">无人机视角</el-option>
        </el-select>
      </div>

      <!-- <div class="roam-flex" v-if="form.sjms === '1'">
        <div class="roam-item-label">飞行高度</div>
        <el-input style="width: 193px" size="mini" v-model="form.cameraHeight" @input="cameraHeigInput"></el-input>
      </div> -->
      <div class="roam-flex" v-if="form.sjms === '1'">
        <div class="roam-item-label">飞行距离</div>
        <el-input
          style="width: 193px"
          size="mini"
          v-model="form.cameraDistance"
          @input="cameraDistInput"
        ></el-input>
      </div>
      <div class="roam-flex" v-if="form.sjms != '0' && form.sjms != '2'">
        <div class="roam-item-label">俯仰角</div>
        <el-input
          style="width: 193px"
          size="mini"
          v-model="form.pitch"
          @input="pitchInput"
        ></el-input>
      </div>
      <div class="roam-flex">
        <div class="roam-item-label">速率</div>
        <el-slider
          style="margin-left: 10px; width: 65%"
          size="mini"
          v-model="form.dynamicSpeed"
          :min="0.5"
          :max="5"
          :step="0.5"
          @change="speedInput"
          show-stops
        ></el-slider>
      </div>
      <div class="roam-flex">
        <div class="roam-item-label">总长度</div>
        <span>{{ form.totalLen }}</span>
      </div>
      <div class="roam-flex">
        <div class="roam-item-label">飞行时长</div>
        <span>{{ form.totalTime }}</span>
      </div>
      <div class="roam-flex">
        <div class="roam-item-label">已漫游时间</div>
        <span>{{ form.time }}</span>
      </div>
      <div class="roam-flex" v-if="form.sjms != '0'">
        <div class="roam-item-label">显示模型</div>
        <el-switch
          size="mini"
          v-model="form.showModel"
          @change="modelChange"
        ></el-switch>
      </div>

      <div class="roam-flex">
        <div class="roam-item-label">显示路线</div>
        <el-switch v-model="form.showLine" @change="lineChange"></el-switch>
      </div>
      <div class="roam-flex">
        <div class="roam-item-label">漫游速度</div>
        <span>{{ form.sd }}</span>
      </div>
      <div class="roam-flex">
        <div class="roam-item-label">经度</div>
        <span>{{ form.jd }}</span>
      </div>
      <div class="roam-flex">
        <div class="roam-item-label">纬度</div>
        <span>{{ form.wd }}</span>
      </div>
      <div class="roam-flex">
        <div class="roam-item-label">漫游高程</div>
        <span>{{ form.height }}</span>
      </div>
      <div class="roam-flex">
        <div class="roam-item-label">地面高程</div>
        <span>{{ form.globeHeight }}</span>
      </div>
      <div class="roam-flex">
        <div class="roam-item-label">进度</div>
        <el-progress
          :percentage="form.ratio"
          :format="format"
          :stroke-width="10"
        ></el-progress>
      </div>
    </div>

    <node-info :nodeInfoStyle="nodeInfoStyle"></node-info>
  </div>
</template>

<script>
import NodeInfo from './nodeInfo.vue'
import dynamicObject from './dynamicObject'
import { EventBus } from '../../common/EventBus'
import { getTime, getDistance } from './js/convert'
import { getRoutePath, deleteRoute } from '@/network/pathfind'

let dynamic
let routeData
export default {
  name: 'ldRoutePlanningList',
  props: {
    routerListUrl: {
      type: String,
      default: null,
    },
    uavModel: {
      type: String,
      default: require('@/assets/img/无人机.glb')
    },
    pointMark: {
      type: String,
      default: require('@/assets/img/mark.png'),
    },
    routerListStyle: {
      type: [Object, Array],
      default: () => ({ background: '#073968a1' }),
    },
    detailsPanelStyle: {
      type: [Object, Array],
      default: () => ({ background: ' #000000d3' }),
    },
    nodeInfoStyle: {
      type: [Object, Array],
      default: () => ({ background: ' #000000d3' }),
    },
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'id',
      },
      routelist: [],
      defaultKey: [],
      positions: [],
      form: {
        sjms: '3',
        dynamicSpeed: 1,
        cameraHeight: null,
        cameraDistance: null,
        pitch: null,
        showModel: false,
        showLine: false,
        totalLen: null,
        totalTime: null,
        time: 0,
        sd: '15m/s',
        jd: null,
        wd: null,
        height: 0,
        globeHeight: null,
        ratio: 0,
      },
      judstModel: false,
    }
  },
  components: { NodeInfo },
  computed: {},
  mounted() {
    this.init()
  },
  beforeDestroy() {
    dynamic && dynamic.exit()
    dynamic && dynamic.removeItem()
    dynamic && dynamic.removePoint()
  },
  methods: {
    fly(node) {
      let url = this.uavModel
      let datas = node.data.routeData
      console.log(datas)
      dynamic.Start(datas, url, shuj)
      this.form = {
        sjms: String(datas.mode),
        cameraHeight: datas.height,
        cameraDistance: datas.range,
        pitch: datas.pitch,
        showModel: datas.showModel,
        showLine: datas.showLine,
        totalLen: getDistance(datas.distance),
        totalTime: getTime(datas.Totaltime),
        time: datas.time,
        sd: datas.speed + 'm/s',
        jd: null,
        wd: null,
        height: 0,
        globeHeight: null,
        ratio: 0,
        dynamicSpeed: 1,
      }
      EventBus.$emit('changeJudstModel', true)
      let that = this
      function shuj(data) {
        if (data.TotalTime) {
          that.form.time = getTime(parseInt(data.TotalTime))
        }
        if (data.distanceTraveled) {
          //已漫游长度
          that.form.distanceTraveled = getDistance(data.distanceTraveled)
        }
        if (data.time) {
          //已漫游时间
          that.form.time = getTime(parseInt(data.time))
        }
        if (data.longitude) {
          //经度
          that.form.jd = data.longitude.toFixed(7) + '°'
        }
        if (data.latitude) {
          //纬度
          that.form.wd = data.latitude.toFixed(7) + '°'
        }
        if (data.height) {
          //
          that.form.height = getDistance(data.height)
        }
        if (data.globeHeight) {
          //速度
          that.form.globeHeight = getDistance(data.globeHeight)
        }
        if (data.speed) {
          that.form.sd = parseInt(data.speed) + 'm/s'
        }
        if (data.ratio) {
          that.form.ratio = parseInt(data.ratio * 100)
        }
      }
    },
    deletePath(id) {
      deleteRoute(id, this.routerListUrl).then((res) => {
        if (res && res.status == 200) {
          this.$message.success('删除成功！')
        }
      })
    },
    init() {
      EventBus.$on('changeJudstModel', (checked) => {
        this.judstModel = checked
      })
      this.routelist.push({
        id: '规划路径',
        name: '规划路径',
        children: [],
      })
      getRoutePath(this.routerListUrl).then((res) => {
        if (res && res.data && res.status == 200) {
          res.data.forEach((element) => {
            this.routelist[0].children.push({
              id: element.id,
              name: element.path.name,
              routeData: element.path,
            })
          })
        }
      })
    },
    checkChangeClick(node, isCheck, data) {
      if (node.children) {
        return
      }
      this.nodeCheckEnt(node, isCheck)
    },
    nodeCheckEnt(node, isCheck) {
      if (isCheck) {
        this.positions = []
        dynamic = new dynamicObject(window.Viewer, this.pointMark)
        for (let i of node.routeData.positionData) {
          var cartesian = Cesium.Cartesian3.fromDegrees(
            parseFloat(i.longitude),
            parseFloat(i.latitude),
            parseFloat(i.height)
          )
          this.positions.push(cartesian)
        }

        dynamic.executeFlycesium_getPath(
          (data) => {
            data.showPoint = node.routeData.showPoint
            data.showLine = node.routeData.showLine
            data.showModel = node.routeData.showModel //模型
            data.mode = parseInt(node.routeData.sjms)
            data.speed = node.routeData.dynamicSpeed //速度
            data.pitch = node.routeData.pitch //俯仰角
            data.range = node.routeData.cameraDistance //飞行距离
            data.height = node.routeData.cameraHeight
            data.url = node.routeData.url
            data.geojson = node.routeData.geojson
            routeData = node.routeData
            // this.assignment();
          },
          this.positions,
          node.routeData.positionData
        )
      } else {
        dynamic && dynamic.exit()
        dynamic && dynamic.removeItem()
        dynamic && dynamic.removePoint()
        dynamic = null
      }
    },
    sjmsChange(val) {
      if (val === '0') {
        dynamic && dynamic.changeFlyMode(0)
        routeData && (routeData.mode = 0)
      } else if (val === '1') {
        dynamic && dynamic.changeFlyMode(1)
        routeData && (routeData.mode = 1)
      } else if (val === '2') {
        dynamic && dynamic.changeFlyMode(2)
        routeData && (routeData.mode = 2)
      } else if (val === '3') {
        dynamic && dynamic.changeFlyMode(3)
        routeData && (routeData.mode = 3)
      }
    },
    cameraHeigInput(value) {
      dynamic && dynamic.setFlyHeight(parseFloat(value))
      routeData && (routeData.height = parseFloat(value))
    },
    cameraDistInput(value) {
      dynamic && dynamic.setFlyDistance(parseFloat(value))
      routeData && (routeData.range = parseFloat(value))
    },
    pitchInput(value) {
      dynamic && dynamic.setFlyPitch(parseFloat(value))
      routeData && (routeData.pitch = parseFloat(value))
      this.form.pitch = value
    },
    speedInput(value) {
      dynamic && dynamic.setMultiplier(value)
      routeData && (routeData.multiplier = value)
      this.form.sd = this.form.sd * value + 'm/s'
    },
    format(percentage) {
      return `${percentage}%`
    },
    modelChange(checked) {
      dynamic && dynamic.showModel(checked)
      routeData && (routeData.showModel = checked)
    },
    lineChange(checked) {
      dynamic && dynamic.showLine(checked)
      routeData && (routeData.showLine = checked)
    },
    location(node) {
      console.log(node.data.routeData.geojson)
      const coords = node.data.routeData.geojson.geometry.coordinates
      let poss = this.getcoords(coords, Cesium)
      let bound = Cesium.BoundingSphere.fromPoints(poss.positions)
      let height = bound.radius * 6 + poss.height
      var offset = new Cesium.HeadingPitchRange(0.0, -1.0, height)
      window.Viewer.camera.flyToBoundingSphere(bound, {
        offset: offset,
        duration: 2.0,
      })
    },
    //处理坐标数据
    getcoords(d, cesium) {
      let coordsArr = [],
        positions = [],
        heightMax = null,
        heightArr = []
      for (let i = 0; i < d.length; i++) {
        const data = d[i]
        heightArr.push(data[2])
        coordsArr.push([data[0], data[1]])
      }
      coordsArr.forEach((e) => {
        let p = cesium.Cartesian3.fromDegrees(e[0], e[1], 0)
        positions.push(p)
      })
      heightMax = Math.max(...heightArr)
      return { positions: positions, height: heightMax }
    },
  },
}
</script>

<style scoped>
.router-list {
  position: absolute;
  padding: 10px 5px;
  top: 50px;
  width: 250px;
  height: 300px;
  left: 10px;
  border: solid #0e60af 2px;
  border-radius: 10px;
}

.tree-column {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.tree-column-icon {
  display: flex;
  gap: 3px;
}
.roam-adjust {
  padding: 10px;
  position: fixed;
  right: 20px;
  bottom: 10px;
  color: #dedede;
  font-size: 15px;
  border: solid #0e60af 1px;
  border-radius: 5px;
}
.roam-flex {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.roam-item-label {
  width: 80px;
  text-align: right;
}
.el-drawer__wrapper {
  position: absolute !important;
  width: 220px !important;
  height: 360px !important;
  bottom: 110px !important;
  left: 20px !important;
  top: auto;
}

.el-tree {
  /* max-height: 600px;
  overflow: auto; */
  max-height: 400px;
  /* overflow: auto; */
  background: #fff0;
  color: #fff;
  font-size: 16px;
}
</style>

<style scoped>
/* elementui 样式 */
::v-deep .el-drawer {
  width: 100% !important;
  height: 100% !important;
  background: #073968a1 !important;
  border: solid #0e60af 2px !important;
  border-radius: 10px !important;
}

::v-deep .el-tree .el-tree-node__content:hover {
  background-color: rgba(55, 107, 159, 0.6) !important;
}

::v-deep .el-progress {
  margin-top: 2px;
  width: 65%;
  position: relative;
  line-height: -1;
}

::v-deep .el-progress-bar {
  padding-right: 50px;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  margin-right: -40px;
  box-sizing: border-box;
}

::v-deep .el-progress__text {
  font-size: 14px;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0px;
  line-height: 1;
}
.el-tree {
  position: relative;
  max-height: 400px;
  cursor: default;
  background: #ffffff00;
  color: #fff;
}
::v-deep .el-tree-node__content:hover {
  background-color: rgba(55, 107, 159, 0.6);
}
::v-deep .el-upload-list__item:hover {
  background-color: rgba(55, 107, 159, 0.6);
}

::v-deep .el-tree-node:focus {
  background-color: rgba(55, 107, 159, 0.6);
}
::v-deep .el-tree-node__content:focus {
  background-color: rgba(55, 107, 159, 0.6);
}

::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: #f5f7fa00;
}

::v-deep .is-current > .el-tree-node__content {
  background: #263445 !important;
}

::v-deep .el-slider__runway {
  margin: 6px 0;
}
::v-deep .el-input__inner {
  background-color: #ffffff00;
  border: 1px solid #dcdfe6;
  color: #fff;
}
</style>